<!--条件单-->
<template>
  <div>
    <mt-header fixed title="条件单">
      <div slot="left"><mt-button @click="handleClose" icon="back">返回</mt-button></div>
    </mt-header>
    <div style="width:90%;height:40px;background-color:#FFF;"></div>
    <div class="">
      <span class="divbott_top">信息</span>
      <br />
      <div class="account">
        <span class="account_font account_padd">账户：{{ username }}</span>
        <span class="account_font account_padd">合约：{{ namesp }}</span>
      </div>
      <div class="account">
        <span class="font_acc">方向：</span>
        <select class="bott_oneinp" v-model="priceval1">
          <option :value="item.id" v-for="item in pricelist1">{{ item.name }}</option>
        </select>
        &nbsp; &nbsp;
        <span class="font_acc">开仓：</span>
        <select class="bott_oneinp" v-model="priceval2">
          <option :value="item.id" v-for="item in pricelist2">{{ item.name }}</option>
        </select>
      </div>
      <div class="account">
        <span>价格：</span>
        <select class="bott_oneinp bott_mar" v-model="priceval3">
          <option :value="item.id" v-for="item in pricelist3">{{ item.name }}</option>
        </select>
        <span>&nbsp; &nbsp;超 &nbsp;</span>
        <input class="inpdiv" type="number" v-model="hands1" min="1" />
        <span>个点位</span>
      </div>
      <div class="account">
        <div>
          <span>数量：</span>
          <input class="inpdiv" type="number" v-model="hands2" min="1" />
        </div>
        <div></div>
      </div>
      <div class="">
        <div class="divbott_top">条件</div>
        <div class="divbott_in2">
          <input class="inprad" checked @click="getRadioVala" type="radio" name="type" value="1" />
          &nbsp; &nbsp;
          <div :class="radioVal == '1' ? '' : 'class-b'">
            <select class="bott_oneinp2" v-model="price">
              <option :value="item.id" v-for="item in pricelist4">{{ item.name }}</option>
            </select>
            <br />
            <span class="inpradfont">连续</span>
            <input type="number" class="inp_font" v-model="penji" min="1" />
            <span class="inpradfont">笔</span>

            <br />
            <select class="bott_oneinp2 marg_v" v-model="hand" style="background: #FFF;width: 100%;">
              <option :value="item.name" v-for="item in pricelist5">{{ item.name }}</option>
            </select>
            <br />
            <div class="inprad_bot">
              <span class="inpradfont">价格</span>
              <input class="inp_bi" type="number" v-model="type_price" min="1" />
            </div>
          </div>
        </div>
        <div class="divbott_in">
          <input class="inprad" @click="getRadioVala" type="radio" name="type" value="2" />
          <div :class="radioVal == '2' ? '' : 'class-b'">
            <span class="inpradfont">时间到达</span>
            <input class="inp_data" v-model="time" type="date" name="user_date" />
          </div>
        </div>
        <div class="divbott_in inu_mar">
          <input class="inprad" @click="getRadioVala" type="radio" name="type" value="3" />
          <span class="inpradfont">预埋，手动发出</span>
        </div>
        <mt-button @click="Submission" class="butt_div2" type="primary">提交</mt-button>
      </div>
      <!-- <div class="bots">
                    <div class="bots_left"></div>
                    <div class="bots_rig">
                       <button class="bots_buo" @click="Close">取消</button>
                       <button class="bots_buo" @click="Submission">确定</button>
                    </div>
                 </div> -->
    </div>
  </div>
</template>

<script>
import qs from 'qs';
export default {
  data() {
    return {
      param: {},
      oneitem: {},
      namesp: '',
      pricelist1: [
        {
          name: '买入',
          id: '1'
        },
        {
          name: '卖出',
          id: '2'
        }
      ],
      priceval1: '',
      pricelist2: [
        {
          name: '开仓',
          id: '1'
        },
        {
          name: '平仓',
          id: '2'
        }
      ],
      priceval2: '',
      pricelist3: [
        {
          name: '现价',
          id: '1'
        },
        {
          name: '最新价',
          id: '2'
        },
        {
          name: '挂单价',
          id: '3'
        },
        {
          name: '快速价',
          id: '4'
        },
        {
          name: '对手价',
          id: '5'
        }
      ],
      priceval3: '',
      pricelist4: [
        {
          name: '最新价',
          id: '1'
        },
        {
          name: '买一价',
          id: '2'
        },
        {
          name: '卖一价',
          id: '3'
        }
      ],
      pricelist5: [
        {
          name: '>='
        },
        {
          name: '='
        },
        {
          name: '<='
        }
      ],
      time: '',
      checkedNames: '',
      hands1: '',
      hands2: '',
      radioVal: '1',
      penji: '1',
      price: '',
      type_price: '',
      chebox: false,
      username: ''
    };
  },
  mounted() {
    this.oneitem = this.$store.state.one_show_product;
  },
  computed: {
    getItem() {
      return this.$store.state.one_show_product;
    }
  },
  watch: {
    getItem(val) {
      this.oneitem = this.$store.state.one_show_product;
    },
    oneitem(val) {
      var that = this;
      // that.namesp = val.name; //名称
      // that.id = val.id; //id
      // console.log(val+'11111111')
    }
  },
  created: function() {
    var that = this;
    that.namesp = this.$route.query.value;
    that.id = this.$route.query.value2;
    that.priceval1 = that.pricelist1[0].id;
    that.priceval2 = that.pricelist2[0].id;
    that.priceval3 = that.pricelist3[4].id;
    that.price = that.pricelist4[0].id;
    that.hand = that.pricelist5[0].name;
    that.getuser();
  },
  methods: {
    //关闭模块
    Close() {
      this.$emit('headstop', 'val');
    },
    getRadioVala(event) {
      //开仓事件
      this.radioVal = event.target.value;
    },
    checli() {
      this.chebox = !this.chebox;
    },
    Submission() {
      var that = this;
      // console.log(that.priceval1); //方向
      // console.log(that.priceval2); //开仓
      // console.log(that.priceval3); //价格
      // console.log(that.hands1); //点位
      // console.log(that.hands2); //数量
      // console.log(that.radioVal + "oo"); //单选按钮

      that.name = {
        price: that.price,
        hand: that.penji,
        type: that.hand,
        type_price: that.type_price
      };
      // console.log(that.name); //笔

      // console.log(that.time + "---"); //时间
      if (typeof that.hands1 == 'undefined' || !that.hands1) {
        return that.$message.error('请选择点位！');
      }
      if (typeof that.hands2 == 'undefined' || !that.hands2) {
        return that.$message.error('请选择数量！');
      }
      if (that.radioVal == '1') {
        if (typeof that.penji == 'undefined' || !that.penji) {
          return that.$message.error('请选择笔数！');
        }
        if (typeof that.type_price == 'undefined' || !that.type_price) {
          return that.$message.error('请选择价格！');
        }
      }
      if (that.radioVal == '2') {
        if (typeof that.time == 'undefined' || !that.time) {
          return that.$message.error('请选择时间！');
        }
      }
      that
        .$http({
          //调用接口
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          url: that.$serverUrl + '/futures_orders_map',
          data: qs.stringify({
            product_id: that.id,
            direction: that.priceval1,
            ware: that.priceval2,
            price: that.priceval3,
            point: that.hands1,
            hand: that.hands2,
            map_type: that.radioVal,
            map1: that.name,
            map2: that.time
          })
        })
        .then(
          res => {
            if (res.data.msg == 'success') {
              that.$message.success(res.data.data);
              that.$router.go(-1);
            } else {
              that.$message.error(res.data.msg);
            }
            that.Close();
          },
          function(error) {}
        );
    },
    getuser() {
      var that = this;
      that
        .$http({
          //调用接口
          method: 'GET',
          headers: {
            'Content-Type': 'application/json; charset=UTF-8'
          },
          url: that.$serverUrl + 'futures_users_info'
        })
        .then(
          res => {
            that.username = res.data.data.nickname;
          },
          function(error) {}
        );
    },
    handleClose() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.account {
  width: 100%;
  height: 50px;
  /* background-color: #B9D1EA; */
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 0.35rem;
  margin-bottom: 30px;
  color: #000000;
  font-size: 0.4rem;
}
.account_font {
  font-weight: 600;
  font-size: 0.5rem;
  color: #26a2ff;
}
.font_acc {
  color: #333;
  font-weight: none;
  font-size: 0.4rem;
}
.account_padd {
  margin-right: 45px;
}
.bott_oneinp {
  width: 3rem;
  height: 0.6rem;
}
.bott_mar {
  margin-right: 0.8rem;
}
.bott_oneinp2 {
  width: 5rem;
  height: 50px;
  margin-bottom: 20px;
}
.marg_v {
  margin-top: 20px;
}
.inpdiv {
  width: 1.5rem;
  height: 0.533333rem;
}

.divbott_top {
  font-size: 0.426667rem;
  padding: 0.1rem;
  color: #000000;
  border-bottom: 1px solid #e0e0e0;
  display: inherit;
  font-size: 0.45rem;
  letter-spacing: 2px;
  margin-top: 0.2rem;
  color: #666;
}
.divbott_in2 {
  width: 710px;
  height: 280px;
  background-color: aliceblue;
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  font-size: 32px;
  color: #000000;
}
.divbott_in {
  width: 710px;
  height: 155px;
  background-color: aliceblue;
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  font-size: 32px;
  color: #000000;
}
.inprad {
  margin-left: 0.3rem;
  margin-right: 2rem;
}
.inpradfont {
  margin-left: 10px;
  margin-right: 10px;
}
.inp_font {
  width: 120px;
  height: 40px;
}
.inp_bi {
  width: 120px;
  height: 40px;
  /* margin-left: 25px; */
}
.inprad_bot {
  /* margin-top: 20px; */
}
.inp_data {
  width: 250px;
  height: 40px;
}
.inp_che {
  margin-left: 20px;
}
.inp_chdiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.inp_chdivss {
  color: #808080;
}
.bots {
  width: 550px;
  height: 70px;
  /* background-color: #B9D1EA; */
  display: flex;
  justify-content: flex-start;
}
.bots_left {
  width: 340px;
  height: 70px;
}
.bots_rig {
  width: 210px;
  height: 70px;
  display: flex;
  justify-content: flex-start;
}
.bots_buo {
  width: 80px;
  height: 25px;
  margin-right: 13px;
  margin-top: 25px;
}
.class-b {
  pointer-events: none;
}
.butt_div2 {
  width: 600px;
  margin-left: 75px;
  margin-top: 20px;
}
</style>
